import React from 'react';
import Picker from 'rmc-picker';
import { addZero } from '../util';
import s from '../index.m.less';

/**
 * 一个选择时间段的组件
 *
 * @prop {string} title  键盘头
 * @prop {object} values  { fromTime: , toTime: }
 * @prop {function} onChange
 * @prop {string} cancelName
 * @prop {function} cancel
 * @prop {string} confirmName
 * @prop {function} confirm
 */
export default class FromtoDatePicker extends React.Component {
    static defaultProps = {
        title: '',
        values: {
            fromTime: 0,
            toTime: 0,
        },
        onChange: () => {},
        cancel: () => {},
        cancelName: '取消',
        confirm: () => {},
        confirmName: '确定',
    };

    constructor(p) {
        super(p);
        this.state = {
            value: this.props.values,
        };
    }

    handleChange = type => value => {
        this.setState(
            {
                value: {
                    ...this.state.value,
                    [type]: value,
                },
            },
            () => {
                this.props.onChange && this.props.onChange(this.state.value);
            }
        );
    };

    submit = () => {
        this.props.confirm && this.props.confirm(this.state.value);
        this.props.close && this.props.close();
    };

    render() {
        const { value } = this.state;
        const {
            title, values, cancelName, confirmName
        } = this.props;
        return (
            <div className={s.layer}>
                <div className={s.header}>
                    <button
                        className={`${s.cancel} modal-close`}
                        onClick={() => {
                            this.props.cancel && this.props.cancel();
                        }}
                    >
                        {cancelName}
                    </button>
                    <div className={s.title}>{title}</div>
                    <button className={s.confirm} onClick={this.submit}>
                        {confirmName}
                    </button>
                </div>
                <div className={s.pk}>
                    <Picker
                        className={s.picker}
                        selectedValue={value.fromTime}
                        onValueChange={this.handleChange('fromTime')}
                        defaultSelectedValue={values.fromTime}
                        indicatorClassName={s.shi}
                    >
                        {Array.from({ length: 25 }).map((i, index) => (
                            <Picker.Item value={index} key={index}>
                                {addZero(index)}
                            </Picker.Item>
                        ))}
                    </Picker>
                    <Picker className={`${s.picker} ${s.middle}`} disabled>
                        <Picker.Item>至</Picker.Item>
                    </Picker>
                    <Picker
                        className={s.picker}
                        selectedValue={value.toTime}
                        onValueChange={this.handleChange('toTime')}
                        defaultSelectedValue={values.toTime}
                        indicatorClassName={s.shi}
                    >
                        {Array.from({ length: 25 }).map((i, index) => (
                            <Picker.Item value={index} key={index}>
                                {addZero(index)}
                            </Picker.Item>
                        ))}
                    </Picker>
                </div>
            </div>
        );
    }
}
